<template>
  <div v-if="role=='student'" class="submit-list-container">
    <div class="submit-list-download-item" v-for="(item, index) in submitList" :key="item.id">
      <a :href="host+'/student/file/submit/download?id='+item.id+'&sid='+sid+'&token='+token" class="download-icon">
        <i class="el-icon-download"/>
      </a>
      <div class="download-icon" @click="deleteOneSubmit(item.id, index)">
        <i class="el-icon-delete"/>
      </div>
      <a :href="host+'/student/file/submit/download?id='+item.id+'&sid='+sid+'&token='+token" class="download-filename">
        {{item.filename}}
      </a>
    </div>
  </div>
  <div v-else-if="role=='teacher'" class="submit-list-container">
    <div class="submit-list-download-item" v-for="(item, index) in submitList" :key="item.id">
      <a :href="host+'/student/file/submit/download?id='+item.id" class="download-icon">
        <i class="el-icon-download"/>
      </a>
      <a :href="host+'/student/file/submit/download?id='+item.id" class="download-filename">
        {{item.filename}}
      </a>
    </div>
  </div>
</template>

<script>
  import {
    uploadMaterial,
    getMaterialByType,
    deleteMaterial,
    getSubmitListByTeacher,
    getSubmitListByStudent, deleteOneSubmit
  } from '../../api'
  import {HOST, TOKEN_KEY, UID_KEY} from '../../constants'
import {ROLE_KEY} from '../../constants'

export default {
  name: 'SubmitList',
  data() {
    return {
      name: 'SubmitList',
      role: localStorage.getItem(ROLE_KEY),
      submitList:[],
      host: HOST,
      token: localStorage.getItem(TOKEN_KEY),
      sid: localStorage.getItem(UID_KEY),
    }
  },
  methods: {
    deleteOneSubmit(id, index) {
      const data = {
        id,
        sid: this.sid,
        token: this.token
      };
      deleteOneSubmit(data).then(res => {
        this.submitList.splice(index, 1)
        this.$message.success("删除成功")
      })
    }
  },
  mounted: function() {
    if(this.role=="teacher") {
      getSubmitListByTeacher({hid: this.$route.params.id}).then(res => {
        this.submitList = res.data;
        console.log(res)
      })
    }
    if(this.role=="student") {
      const data = {
        sid: localStorage.getItem(UID_KEY),
        hid: this.$route.params.id
      };
      getSubmitListByStudent(data).then(res => {
        this.submitList = res.data
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.submit-list {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
  &-download-item {
    display: flex;
    background-color: white;
    height: 50px;
    border: 1px solid gainsboro;
    border-radius: 5px;
    margin-top: 10px;
    align-items: center;
    padding: 0 15px;
  }
}
.download-icon {
  font-size: 24px;
  margin-right: 20px;
  cursor: pointer;
}
.download-filename {
  color: #20a0ff;
  position: relative;
  top: 2px;
}
</style>
